<template>
  <div class="simulation-container">
    <div class="toolbar">
      <el-radio-group v-model="activeType" size="default">
        <el-radio-button label="电" />
        <el-radio-button label="水" />
        <el-radio-button label="气" />
      </el-radio-group>

      <el-select v-model="selectedStrategy" placeholder="选择节能策略" size="default" style="width: 280px">
        <el-option v-for="(item, index) in strategyOptions[activeType]" :key="index" :label="item.label"
          :value="item.value" />
      </el-select>
    </div>

    <v-chart :option="chartOptions" style="height: 420px; margin-top: 30px;" />

    <el-descriptions :column="2" border size="default" style="margin-top: 24px; font-size: 16px;">
      <el-descriptions-item label="原始能耗">{{ originalTotal }} {{ unit }}</el-descriptions-item>
      <el-descriptions-item label="优化后能耗">{{ optimizedTotal }} {{ unit }}</el-descriptions-item>
      <el-descriptions-item label="节能量">{{ savedAmount }} {{ unit }}</el-descriptions-item>
      <el-descriptions-item label="节能率">{{ savingRate }}%</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import VChart from 'vue-echarts'

const activeType = ref('电')
const selectedStrategy = ref(null)

const unitMap = { 电: 'kWh', 水: 'm³', 气: 'm³' }

const baseSeries = {
  电: [300, 420, 350, 310, 280],
  水: [150, 160, 155, 158, 152],
  气: [100, 120, 110, 105, 98]
}

const strategyOptions = {
  电: [
    { value: '策略_变频空调', label: '空调负载削峰' },
    { value: '策略_照明感应', label: '照明感应联动' }
  ],
  水: [
    { value: '策略_感应水龙头', label: '感应水龙头控制' },
    { value: '策略_洗手间定时', label: '洗手间供水定时' }
  ],
  气: [
    { value: '策略_热水器定时', label: '热水器定时启停' },
    { value: '策略_锅炉调压', label: '锅炉压力自适应控制' }
  ]
}

const strategyReduceFactor = {
  策略_变频空调: 0.15,
  策略_照明感应: 0.10,
  策略_感应水龙头: 0.12,
  策略_洗手间定时: 0.14,
  策略_热水器定时: 0.18,
  策略_锅炉调压: 0.16
}

const optimizedSeries = computed(() => {
  const factor = strategyReduceFactor[selectedStrategy.value] || 0
  return baseSeries[activeType.value].map(v => +(v * (1 - factor)).toFixed(1))
})

const chartOptions = computed(() => ({
  title: { text: '', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: {
    data: ['原始', '优化'],
    textStyle: { fontSize: 16 }
  },
  xAxis: {
    type: 'category',
    axisLabel: { fontSize: 16 },
    data: ['0:00', '6:00', '12:00', '18:00', '24:00']
  },
  yAxis: {
    type: 'value',
    axisLabel: { fontSize: 16 }
  },
  series: [
    { name: '原始', type: 'line', smooth: true, data: baseSeries[activeType.value], lineStyle: { width: 4 } },
    { name: '优化', type: 'line', smooth: true, data: optimizedSeries.value, lineStyle: { width: 4 } }
  ]
}))

const originalTotal = computed(() =>
  baseSeries[activeType.value].reduce((a, b) => a + b, 0).toFixed(1)
)
const optimizedTotal = computed(() =>
  optimizedSeries.value.reduce((a, b) => a + b, 0).toFixed(1)
)
const savedAmount = computed(() =>
  (originalTotal.value - optimizedTotal.value).toFixed(1)
)
const savingRate = computed(() =>
  ((savedAmount.value / originalTotal.value) * 100).toFixed(1)
)
const unit = computed(() => unitMap[activeType.value])
</script>

<style scoped>
.simulation-container {
  max-width: 1100px;
  margin: 0 auto;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
}
</style>